import { useId } from 'react'

import { Container } from '../Container'

const features = [
  {
    name: '兴趣分析',
    description:
      '在众多专业和各种职业类型中，哪些契合我的兴趣倾向？兴趣分析为你解答。',
  },
  {
    name: '性格分析',
    description:
      '以职业性格类型理论为基础，分析测试者的性格特征和职业倾向。',
  },
  {
    name: '能力分析',
    description:
      '分析测试者的能力类型和智能优势，适合哪些专业的需求。',
  },
  {
    name: '价值观分析',
    description:
      '澄清自己的职业价值观，使其有效引导一个人的专业选择和职业规划。',
  },
  {
    name: '学业表现分析',
    description:
      '鉴别自己在各学业科目上的优势和劣势，并在专业选择上扬长避短。',
  },
  {
    name: '专业推荐分析',
    description:
      '基于个人特质的学科与专业深度匹配度评估，为您提供详细的专业课程和就业方向指导。',
  },
]

export function SecondaryFeatures() {
  return (
    <section
      id="secondary-features"
      aria-label="Features for building a portfolio"
      className="py-20 sm:py-32"
    >
      <Container>
        <div className="mx-auto max-w-2xl sm:text-center">
          <h2 className="text-3xl font-medium tracking-tight text-gray-900">
            全面的职业与教育大数据分析
          </h2>
          <p className="mt-2 text-lg text-gray-600">
            结合心理学、计算机技术与大数据研究，为你的专业选择和职业规划提供深入的指导与建议。
          </p>
        </div>
        <ul
          role="list"
          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
        >
          {features.map((feature) => (
            <li
              key={feature.name}
              className="rounded-2xl border border-gray-200 p-8"
            >
              <h3 className="mt-2 text-lg font-semibold text-gray-900">
                {feature.name}
              </h3>
              <p className="mt-2 text-base text-gray-700">{feature.description}</p>
            </li>
          ))}
        </ul>
      </Container>
    </section>
  )
}
